<template>
  <div class="layout-container gradient-bg">
    <!-- 右上角三横线菜单 -->
    <div class="menu-button">
      <a-dropdown placement="bottomLeft" :trigger="['click']">
        <a-button type="text" size="large" class="menu-trigger">
          <template #icon>
            <menu-outlined />
          </template>
        </a-button>
        <template #overlay>
          <a-menu class="header-menu">
            <a-menu-item key="home">
              <router-link to="/">首页</router-link>
            </a-menu-item>
            <a-menu-item key="qrcode">
              <router-link to="/qrcode">蒜苔二维码</router-link>
            </a-menu-item>
            <a-menu-item key="paycode">
              <router-link to="/more/paycode">汇付付款码</router-link>
            </a-menu-item>
            <a-menu-item key="lakala">
              <router-link to="/more/lakala">拉卡拉电子合同申请</router-link>
            </a-menu-item>
            <a-menu-item key="templates">
              <router-link to="/more/templates">模板展示</router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="about">
              <router-link to="/more/about">关于我们</router-link>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="dashboard">
              <router-link to="/auth/login">后台入口</router-link>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <router-view />
    </div>

    <!-- 底部版权 -->
    <footer class="footer">
      <!-- 动态励志词汇 -->
      <div class="inspiration-text">
        <p class="motto">{{ currentMotto }}</p>
      </div>
      <p>Copyright © {{ new Date().getFullYear() }} 蒜苔AI &nbsp;|&nbsp; <a href="https://suantai.com" target="_blank" rel="noopener" class="footer-link">suantai.com</a> &nbsp;|&nbsp; Powered by 田园科技</p>
      <p class="icp-info"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="footer-link">沪ICP备18015888号-4</a></p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { MenuOutlined } from '@ant-design/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue'

// 励志词汇数组
const mottos = [
  '做时间的朋友',
  '一切以用户为中心',
  '日拱一卒，精益求精',
  '匠心独运，追求卓越，用心打磨每一个产品细节',
  '以诚待人，以信立业，用技术改变世界',
  '持续学习，永不停歇，在创新中寻找突破',
  '用户至上，体验为王，让每一次交互都有温度',
  '专注本质，化繁为简，让科技更有人文关怀',
  '团队协作，共同成长，一起创造美好未来',
  '敏捷迭代，快速响应，在变化中保持初心',
  '质量第一，安全至上，为用户构建可信赖的服务',
  '开放包容，拥抱变化，让创新成为习惯',
  '深度思考，系统设计，用智慧解决复杂问题',
  '数据驱动，理性决策，让每一步都有据可循',
  '简约设计，优雅实现，追求代码与艺术的完美结合',
  '客户成功，我们成功，携手共赢创造价值'
]

const currentMotto = ref('')
let timer: number | null = null

// 随机获取一条励志词汇
const getRandomMotto = () => {
  const randomIndex = Math.floor(Math.random() * mottos.length)
  currentMotto.value = mottos[randomIndex]
}

// 组件挂载时初始化
onMounted(() => {
  getRandomMotto() // 立即显示一条

  // 设置定时器，每30-60秒随机更换一次
  const setRandomTimer = () => {
    const randomInterval = 30000 + Math.random() * 30000 // 30-60秒随机间隔
    timer = window.setTimeout(() => {
      getRandomMotto()
      setRandomTimer() // 递归设置下一个随机定时器
    }, randomInterval)
  }

  setRandomTimer()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer)
  }
})
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.menu-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.menu-trigger {
  color: #999;
  border: none;
  box-shadow: none;
}

.menu-trigger:hover {
  color: #666;
}

.main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.footer {
  text-align: center;
  padding: 20px;
  color: #bbb;
  font-size: 12px;
  border-top: 1px solid #f0f0f0;
}

.footer p {
  margin: 0;
}

.inspiration-text {
  margin-bottom: 15px;
  padding: 10px 0;
}

.motto {
  font-size: 14px;
  color: #666;
  font-style: italic;
  margin: 0 !important;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-in-out;
}

.motto:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.icp-info {
  margin-top: 8px !important;
  font-size: 12px;
  color: #bbb;
}

:deep(.header-menu) {
  min-width: 120px;
}

:deep(.header-menu a) {
  text-decoration: none;
  color: inherit;
}

.footer-link {
  color: #bbb;
  text-decoration: underline;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #1890ff;
}

.gradient-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f7fafc 0%, #e3e8ee 100%);
}
</style>
